import { Layout, Menu, Breadcrumb } from 'antd';
import React from 'react'
import { withRouter } from 'react-router-dom'
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';

const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;

@withRouter

class Frame extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };


  // 编程式导航跳转
  navClick = ({ key }) => this.props.history.push(key)



  componentDidMount() {
    console.log(this.props);

  }

  render() {
    let routes = this.props.mainRouter;
    
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
          <div className="logo" />
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
            <Menu.Item key="0">
              <PieChartOutlined />
              {/* <span>占位</span> */}
            </Menu.Item>
            <Menu.Item key="1">
              <PieChartOutlined />
              <span>Option 1</span>
            </Menu.Item>
            {
              routes.map((item, index) => {
                
                return (
                  <SubMenu
                    key={index}
                    title={
                      <span>
                        <UserOutlined />
                        <span>{item.title}</span>
                      </span>
                    }
                  >
                    {item.children.map(childrenitem => {
                      return (
                        <Menu.Item key={childrenitem.pathname} onClick={this.navClick} >{childrenitem.title}</Menu.Item>
                      )
                    })}

                  </SubMenu>
                )
              })
            }





            {/* <SubMenu
              key="sub2"
              title={
                <span>
                  <TeamOutlined />
                  <span>Team</span>
                </span>
              }
            >
              <Menu.Item key="6">Team 1</Menu.Item>
              <Menu.Item key="8">Team 2</Menu.Item>
            </SubMenu> */}

          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              {this.props.children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>Ant Design ©2020 Created by Ant UED</Footer>
        </Layout>
      </Layout>
    );
  }
}

export default Frame